<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红包详情</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/commons.css">
    <style>
        body, .mui-content{
            background: #d93333;
        }
        .top_box,.middle-box{
            position: relative;
            width: 100%;
            margin: 0;
            height: auto;
        }
        .middle-box {
            position: fixed;
            z-index: 9999;
            top: 44px;
            left: 0;
        }
        .top_box img,.middle-box img{
            width: 100%;
            display: block;
        }
        .top_box .all-box{
            position: absolute;
            top:150px;
            width: 100%;
        }
        .middle-box .all-box{
            position: absolute;
            top:0;
            width: 100%;
        }
        .top_box .money{
            width: 100%;
            text-align: center;
            color: #d53331;
        }
        .top_box .money span{
            font-size: 40px;
            font-weight: 700;
            margin: 0 4px;
        }
        .top_box .hasDeposit{
            color: #d33333;
            width: 100%;
            text-align: center;
            font-size: 13px;
            margin-top: 16px;
            font-weight: 400;
        }
        .top_box .btn-1,.top_box .btn-2,.top_box .btn-3,
        .middle-box .btn-1,.middle-box .btn-2,.middle-box .btn-3{
            width: 72%;
            background: #ffe44b;
            color: #7e0001;
            height: 42px;
            line-height: 42px;
            text-align: center;
            border-radius: 6px;
            margin-left: 14%;
            margin-top: 43px;
        }
        .middle-box .btn-1{
            margin-top: 33px;
        }
        .top_box .btn-2,.middle-box .btn-2{
            bottom: 58px;
            margin-top: 15px;
            font-weight: 700;
            font-size: 18px;
            height: 42px;
            line-height: 42px;
        }
        .top_box .btn-3,.middle-box .btn-3{
            height: 47px;
            margin-top: 15px;
        }
        .top_box .btn-3 span,.middle-box .btn-3 span{
            display: block;
            width: 100%;
            text-align: center;
        }
        .top_box .btn-3 .share,.middle-box .btn-3 .share{
            font-size: 20px;
            font-weight: 700;
            line-height: 20px;
            padding-top: 6px;
        }
        .top_box .btn-3 .share-tips,.middle-box .btn-3 .share-tips{
            font-size: 12px;
            line-height: 12px;
            padding-top: 6px;
            color: #7d0000;
        }
        .top_box h3,.middle-box h3{
            color: #edc1c2;
            padding-left: 15px;
            padding-bottom: 9px;
            border-bottom: 1px solid #f8dbdd;
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 0;
            background: #d93333;
            margin-top: 0;
            padding-top: 0;
        }
        .bottom-box{
            width: 100%;
            height: auto;
        }
        .bottom-box .detail-box{
            width: 96%;
            height: auto;
            margin: 0 0 0 4%;
        }
        .bottom-box .detail-box .detail{
            width: 100%;
            height: auto;
            border-bottom: 1px solid #ea9998;
        }
        .bottom-box .detail-box .detail .user-autor{
            float: left;
            width: 42px;
            height: 42px;
            border-radius: 42px;
            margin-top: 15px;
            margin-bottom: 12px;
        }
        .bottom-box .detail-box .detail .user-autor img{
            width: 42px;
            height: 42px;
            border-radius: 42px;
        }
        .bottom-box .detail-box .detail .user-info{
            float: left;
            margin-left: 15px;
            color: #fff;
        }
        .bottom-box .detail-box .detail .user-info .phone{
            display: block;
            margin-top: 19px;
            font-size: 16px;
            line-height: 16px;
        }
        .bottom-box .detail-box .detail .user-info .time{
            color: #e49a99;
            margin-top: 10px;
            font-size: 14px;
            line-height: 14px;
        }
        .bottom-box .detail-box .detail .money-box{
            float: right;
            color: #ffe44b;
            margin-top: 19px;
            font-size: 15px;
            margin-right: 17px;
        }
        @media screen and (min-width: 414px) {
            .top_box .all-box{
                top:152px;
            }

        }
        @media screen and (min-width: 375px) and (max-width: 413px) {
            .top_box .all-box{
                top:144px;
            }
            .top_box .hasDeposit{
                margin-top: 7px;
            }
        }
        @media screen and (min-width: 321px) and (max-width: 374px) {
            .top_box .all-box{
                top:120px;
            }
        }
        @media screen and (max-width: 320px) {
            .top_box .all-box{
                top:110px;
            }
            .top_box .hasDeposit{
                margin-top: 3px;
            }
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="index.html"></a>
    <h1 class="mui-title">红包详情</h1>
</header>
<!--
    作者：837081299@qq.com
    时间：2017-02-28
    描述：头部结束
-->
<div class="middle-box" style="display: none;" id="middle_box">
    <img src="../img/small_hongbao_detail.jpg" alt="img">
    <div class="all-box">
        <div class="btn-1"></div>
        <div class="btn-2" style="display: none;">确 定</div>
        <div class="btn-3" style="display: none;">
            <span class="share">分享</span>
            <span class="share-tips">（此红包需分享后存入账户）</span>
        </div>
    </div>
    <h3>红包详情</h3>
</div>
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-content">
    <div class="top_box">
        <img src="../img/hongbao_detail.jpg" alt="img">
        <div class="all-box">
        <div class="money"><small>共</small><span id="Integral"></span><small>元</small></div>
        <div class="hasDeposit">已存入账户，可提现</div>
        <div class="btn-1"></div>
        <div class="btn-2" style="display: none;" id="btn_2">确 定</div>
        <div class="btn-3" style="display: none;" id="btn_3">
            <span class="share">分享</span>
            <span class="share-tips">（此红包需分享后存入账户）</span>
        </div>
        </div>
        <h3>红包详情</h3>
    </div>

    <div class="bottom-box" id="bottom_box">
        <div class="detail-box">
            <!--<div class="detail mui-clearfix">-->
                <!--<div class="user-autor"><img src="../img/logo_h.jpg" alt="头像"></div>-->
                <!--<div class="user-info">-->
                    <!--<span class="phone">138****9635</span>-->
                    <!--<span class="time">09-11</span>-->
                <!--</div>-->
                <!--<div class="money-box">2.5元</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/sha1.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>  document.write("<s"+"cript type='text/javascript' src='../js/common.js?"+Math.random()+"'></scr"+"ipt>"); </script>
<script>  document.write("<s"+"cript type='text/javascript' src='../js/hongbao_detail.js?"+Math.random()+"'></scr"+"ipt>"); </script>
<script>
    var ticket;
    var timer;
    var wxSha1;
    var shareMoney = GetQueryString('money')
    $(function () {
            $.ajax({
                url:'/shareC/getAccessToken.json',
                dataType:'json',
                type:'post',
                success:function (data) {
                    //console.log(data);
                    ticket = data.datas;
                    //ticket = 'kgt8ON7yVITDhtdwci0qeQa8Ki1WA1wFqPG86V5WrfLFookrccU4Z9LoNvQ9B8CE5k7gxYJREYH3kC_89JOIJQ';
                    timer = Date.parse(new Date());
                    timer = timer / 1000;
                    var WXsignature = 'jsapi_ticket=' + ticket + '&noncestr=Wm3WZYTPz0wzccnW&timestamp=' + timer + '&url=' + location.href.split('#')[0]
                    wxSha1 = hex_sha1(WXsignature);
                    //console.log(WXsignature);
                    //console.log(wxSha1);
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: 'wxfe59dbeae5082ce6', // 必填，公众号的唯一标识
                        timestamp: timer, // 必填，生成签名的时间戳
                        nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串
                        signature: wxSha1,// 必填，签名，见附录1
                        jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });

                    wx.ready(function(){
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
                        wx.checkJsApi({
                            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                            success: function(res) {
                                // 以键值对的形式返回，可用的api值true，不可用为false
                                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                            },
                            fail:function () {
                                mui.alert('您的微信版本过低，暂不支持分享，请升级微信')
                            }
                        });

                        //分享给朋友
                        wx.onMenuShareAppMessage({
                            title: '分享一个产品，代购整座城市', // 分享标题
                            desc: '我在助利商城抢到'+shareMoney+'元红包，快来围观', // 分享描述
                            link: 'http://www.ddmzl.com/m/html/share_img.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: 'http://www.ddmzl.com/m/img/share_logo.jpg', // 分享图标
                            type: '', // 分享类型,music、video或link，不填默认为link
                            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                            success: function () {
                                mui.toast('分享成功');
                                 $.ajax({
                                     url:'/user/UpdateUserIntegral.json',
                                     dataType:'json',
                                     type:'get',
                                     data:{
                                         token:getItem('token'),
                                     },
                                     success:function(data){
                                         window.location.href="http://www.ddmzl.com/m/html/index.html"
                                         // 用户确认分享后执行的回调函数
                                     }
                                 })
                            },
                            cancel: function () {
                                mui.toast('您取消了分享')
                                // 用户取消分享后执行的回调函数
                            }
                        });

                        //分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: '分享一个产品，代购整座城市', // 分享标题
                            desc: '我在助利商城抢到'+shareMoney+'元红包，快来围观', // 分享描述
                            link: 'http://www.ddmzl.com/m/html/share_img.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: 'http://www.ddmzl.com/m/img/share_logo.jpg', // 分享图标
                            success: function () {
                                mui.toast('分享成功');
                                 $.ajax({
                                     url:'/user/UpdateUserIntegral.json',
                                     dataType:'json',
                                     data:{
                                         token:getItem('token'),
                                     },
                                     success:function(data){
                                         window.location.href="http://www.ddmzl.com/m/html/index.html"
                                         // 用户确认分享后执行的回调函数
                                     }
                                 })
                            },
                            cancel: function () {
                                mui.toast('您取消了分享')
                                // 用户取消分享后执行的回调函数
                            }
                        });
                    });
                }



                //}
            })
    })


</script>
</body>
</html>